﻿<template>
    <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="列表名称">
            <el-input v-model="form.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="是否可以导出">
            <el-switch v-model="form.isdc"></el-switch>
        </el-form-item>
        <el-form-item label="数据权限验证">
            <el-switch v-model="form.dataqx"></el-switch>
            <p class="text-info" style="font-size: 12px;line-height: 12px;">默认查看所有数据,添加数据权限后会验证数据,只能查看当前用户所属角色拥有的权限机构的数据</p>
        </el-form-item>




        <el-form-item label="数据来源">
            <el-cascader v-model="form.value"
                         :options="options"
                         @change="handleChange" filterable></el-cascader>
        </el-form-item>
        <el-form-item label="关联表单">
            <el-select v-model="form.glbd" filterable>
                <el-option v-for="item in BDData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="绑定字段" name="0">
                <p>
                    1:默认显示所有字段，
                    <!--删除字段后不会从数据库读取字段-->
                </p>
                <p>
                    2:没有别名的字段不会显示在列表组件中
                </p>
                <el-table :data="form.WDData" border style="width: 100%" height="500px" :cell-style="{height:'16px'}" class="mt10">

                    <el-table-column prop="colid"
                                     label="CODE"
                                     width="200">
                    </el-table-column>
                    <el-table-column prop="coltype"
                                     label="类型"
                                     width="100">
                    </el-table-column>

                    <el-table-column prop="colname"
                                     label="别名"
                                     width="180" sortable>
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.colname" size="mini"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="colorder"
                                     label="排序"
                                     width="180" sortable>
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.colorder" size="mini"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column prop="isshow"
                                     label="默认显示">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isshow">
                        </template>
                    </el-table-column>
                    <el-table-column prop="isshow"
                                     label="合计列">
                        <template slot-scope="scope">
                            <div>
                                <el-switch v-model="scope.row.ishj">
                            </div>
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="操作" width="200" >
        <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="delwd( scope.$index, form.WDData)">删除</el-button>
        </template>
    </el-table-column>-->

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="操作按钮" name="1">
                <p>
                    1:系统默认按钮无法自定义操作代码
                </p>
                <p>
                    2:按钮模式未批量操作时，按钮位于表格上方，操作代码中可获取格式为数组的"ids"参数，按钮模式为行操作时，按钮位于每一行
                    操作代码中可获取格式为json的"rowdata"参数
                </p>
                <el-table :data="ActionData" style="width:100%;min-height:300px;margin-top:10px" height="500px" :cell-style="{height:'16px'}" class="data-table" stripe border>


                    <el-table-column fixed="right"
                                     label="操作"
                                     width="80">
                        <template slot-scope="scope">
                            <el-button @click="delczl(scope.$index, ActionData)" type="danger" size="mini">删除</el-button>

                        </template>
                    </el-table-column>

                    <el-table-column fixed="right"
                                     label="按钮类型"
                                     width="120">
                        <template slot-scope="scope">
                            <span v-text="scope.row.issys?'系统默认按钮':'自定义按钮'"></span>

                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="操作名称"
                                     width="120">
                        <template slot-scope="scope">
                            <div v-show="!scope.row.issys">
                                <el-input v-model="scope.row.czname" placeholder="请输入名称"></el-input>
                            </div>
                            <div v-show="scope.row.issys">
                                <span v-text="scope.row.czname" placeholder="请输入名称"></span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="样式"
                                     width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.bttype" placeholder="请选择" size="mini">
                                <el-option value="primary"></el-option>
                                <el-option value="success"></el-option>
                                <el-option value="info"></el-option>
                                <el-option value="warning"></el-option>
                                <el-option value="danger"></el-option>


                                <el-option value="text"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="按钮模式"
                                     width="140">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.isrowcz" placeholder="请选择" size="mini">
                                <el-option value="0" label="批量操作"></el-option>
                                <el-option value="1" label="行操作"></el-option>

                            </el-select>
                        </template>
                    </el-table-column>


                    <el-table-column fixed="right" label="操作Code(JS)">
                        <template slot-scope="scope">
                            <div v-show="!scope.row.issys">
                                <el-input v-model="scope.row.jscode" placeholder="请输入点击操作按钮后执行得JS代码" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>

                            </div>
                        </template>
                    </el-table-column>

                </el-table>
                <el-button @click="addczl()" type="success" size="mini" style="margin-top:10PX">添加操作列</el-button>
                <el-button @click="resetcz()" type="danger" size="mini" style="margin-top:10PX">恢复默认操作</el-button>

            </el-tab-pane>
            <el-tab-pane label="默认查询" name="2">
                <p>
                    1:添加默认查询组件
                </p>

                <el-table :data="form.mrcxdata" style="width:100%;min-height:300px;margin-top:10px" height="500px" :cell-style="{height:'16px'}" class="data-table" stripe border sortable>


                    <el-table-column fixed="right"
                                     label="操作"
                                     width="80">
                        <template slot-scope="scope">
                            <el-button @click="delcx(scope.$index, form.mrcxdata)" type="danger" size="mini">删除</el-button>

                        </template>
                    </el-table-column>


                    <el-table-column fixed="right" label="查询名称" width="120">
                        <template slot-scope="scope">
                            <div>
                                <el-input v-model="scope.row.cxname" placeholder="请输入名称"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="查询字段"
                                     width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.cxzd" placeholder="请选择" size="mini">
                                <el-option v-for="item in form.WDData" :key="item.colid" :label="item.colname" :value="item.colid"></el-option>

                            </el-select>
                        </template>
                    </el-table-column>

                    <!--<el-table-column fixed="right"
                                     label="查询类型" 
                                     width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.cal" placeholder="请选择" size="mini" style="width: 100px;">
                                <el-option label="包含" value="0"></el-option>
                                <el-option label="等于" value="4"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>-->
                    <el-table-column fixed="right"
                                     label="动态数据"
                                     width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.datatype" placeholder="请选择" size="mini" style="width: 100px;">
                                <el-option label="静态" value="0"></el-option>
                                <el-option label="动态" value="1"></el-option>
                            
                            </el-select>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="类别数据">
                        <template slot-scope="scope">
                            <div>
                                <el-input v-show="scope.row.datatype!=1" v-model="scope.row.cxdata" placeholder="逗号隔开" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>



                <el-button @click="addcx()" type="success" size="mini" style="margin-top:10PX">添加分类查询</el-button>

            </el-tab-pane>
            <el-tab-pane label="自定义查询组件" name="3">
                <el-table :data="form.zdydata" style="width:100%;min-height:300px;margin-top:10px" height="500px" :cell-style="{height:'16px'}" class="data-table" stripe border>
                    <el-table-column fixed="right"
                                     label="操作"
                                     width="80">
                        <template slot-scope="scope">
                            <el-button @click="delzj(scope.$index, form.zdydata)" type="danger" size="mini">删除</el-button>

                        </template>
                    </el-table-column>


                    <el-table-column fixed="right" label="组件名称" width="120">
                        <template slot-scope="scope">
                            <div>
                                <el-input v-model="scope.row.wigname" placeholder="请输入组件名称"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="组件文件路径">
                        <template slot-scope="scope">
                            <div>
                                <el-input v-model="scope.row.wigurl" placeholder="输入组件路径"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
                <el-button @click="addzj()" type="success" size="mini" style="margin-top:10PX">添加自定义组件</el-button>
            </el-tab-pane>
        </el-tabs>


        <el-form-item style="margin-top:10PX">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <!--<el-button>取消</el-button>-->
        </el-form-item>
    </el-form>
</template>
<script>
    module.exports = {
        name: 'list_temp',
        props: ['pdata'],
        data: function () {
            return {
                funid: ComFunJS.getQueryString('ID', '0'),
                activeName: "0",
                options: [{
                    value: '0',
                    label: '数据表',
                    children: []
                }, {
                    value: '1',
                    label: '数据集',
                    children: []
                }],
                ActionData: [],
                BDData: [],
                form: {
                    name: '',
                    type: [],
                    isdc: true,
                    dataqx: false,//数据权限
                    WDData: [],
                    value: [],
                    glbd: "",
                    ActionData: [],
                    mrcxdata: [],
                    zdydata: []

                }
            }
        },
        methods: {
            addzj: function () {
                if (typeof (this.form.zdydata) == "undefined") {
                    this.form.zdydata = [];
                }
                this.form.zdydata.push({ wigname: "组件名称" + Math.floor(Math.random() * (9)) + 1, wigurl: "", wigcode: "qj_" + Math.floor(Math.random() * (99)) + 1, wigtype: "自定义组件", ico: "icon-biaodanzujian-xialakuanglv" });
            },
            delzj: function (index, rows) {
                rows.splice(index, 1);
            },
            addczl: function () {
                this.ActionData.push({ czname: "操作" + this.ActionData.length, isshow: false, issys: false, bttype: "text", jscode: "", isrowcz: "0" });
            },


            delczl: function (index, rows) {
                rows.splice(index, 1);
            },
            addcx: function () {
                this.form.mrcxdata.push({ cxname: "操作", cxzd: "", cxdata: "", cal: "0", datatype: "0", dtsource: [], val: "" });
            },
            delcx: function (index, rows) {
                rows.splice(index, 1);
            },
            delwd: function (index, rows) {
                rows.splice(index, 1);

            },
            onSubmit() {
                var pro = this;
                pro.form.ActionData = pro.ActionData;//需要放到ExtData里，方便页面操作
                $.getJSON("/api/Auth/ExeAction?Action=SETLISTPAR", { P1: pro.funid, P2: JSON.stringify(pro.form), ActionData: JSON.stringify(pro.ActionData) }, function (result) {
                    if (!result.ErrorMsg) {
                        pro.$notify({
                            title: '成功',
                            message: '操作成功',
                            type: 'success'
                        });
                        top.app.InitWF();
                    }
                });
            },
            resetcz: function () {
                this.$confirm('此操作将重置按钮配置, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    var pro = this;
                    var actiondata = [
                        { czname: '新增', isshow: false, issys: true, bttype: "success", jscode: "", isrowcz: "0" },
                        { czname: '批量删除', isshow: false, issys: true, bttype: "danger", jscode: "", isrowcz: "0" },
                        { czname: '编辑', isshow: false, issys: true, bttype: "text", jscode: "", isrowcz: "1" },
                        { czname: '删除', isshow: false, issys: true, bttype: "text", jscode: "", isrowcz: "1" }
                    ];
                    pro.form.ActionData = actiondata;//需要放到ExtData里，方便页面操作
                    $.getJSON("/api/Auth/ExeAction?Action=SETLISTPAR", { P1: pro.funid, P2: JSON.stringify(pro.form), ActionData: JSON.stringify(actiondata) }, function (result) {
                        if (!result.ErrorMsg) {
                            pro.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            pro.ActionData = [];
                            pro.ActionData = actiondata;

                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
            },
            handleChange(value) {
                var pro = this;
                $.getJSON("/api/Bll/ExeAction?Action=DATABI_GETFIELDDATA", { P1: value[0], P2: value[1] }, function (result) {
                    if (!result.ErrorMsg) {
                        var tempwd = _.filter(result.Result, function (ob) {
                            return ob.colid.indexOf("_YYYY") < 0;//去掉统计字段
                        });
                        pro.form.WDData = tempwd;
                    }
                });
            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {

                $.getJSON("/api/Bll/ExeAction?Action=DATABI_GETTABANDSET", {}, function (result) {
                    if (!result.ErrorMsg) {
                        pro.options[0].children = result.Result;
                        pro.options[1].children = result.Result1;
                        pro.BDData = result.Result2;
                        $.getJSON("/api/Auth/ExeAction?Action=GETLISTTEMP", { P1: pro.funid },
                            function (resultlist) {
                                if (resultlist.Result.ExtData) {

                                    var tempdata = JSON.parse(resultlist.Result.ExtData);
                                    if (typeof (tempdata.mrcxdata) == "undefined") {
                                        tempdata.mrcxdata = [];
                                    }
                                    if (typeof (tempdata.glbd) == "undefined") {
                                        tempdata.glbd = "";
                                    }
                                    if (typeof (tempdata.zdydata) == "undefined") {
                                        tempdata.zdydata = [];
                                    }
                                    pro.form = tempdata;

                                }
                                if (resultlist.Result.ActionData) {
                                    pro.ActionData = JSON.parse(resultlist.Result.ActionData);

                                }
                            }
                        )

                    }
                });
            })

        },
        watch: {
            childpro: { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                },
                deep: true
            }
        }
    };
</script>